<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#warp{
				background-color: #eee;
			}
			
			.item{
				width: 200px;height: 300px;
				background-color: white;
			}
			/*.item 鼠标悬停的时候生效的样式*/
			.item:hover{
				/*阴影: 水平方向的位置    垂直方向的位置   模糊范围    颜色  */
				box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
				
				
				/*多重阴影，用逗号隔开*/
				/*box-shadow: 2px 2px 10px red,10px 10px 10px blue;*/
				
				
				/*内部阴影 inset*/
				/*box-shadow: 5px 5px 20px red inset;*/
				
				
			}
		</style>
	</head>
	<body id="warp">
		
		<div class="item"></div>
		
	</body>
</html>